<template>
    <section class="w-full">
        <p class="page-title">{{this.$route.name}}</p>
        <el-tabs :tab-position="tabPosition">
            <el-tab-pane>
                <span slot="label" style="height:70px">
                    <span class="span-box">
                        <span>
                            <el-button type="mini" style="width: 90px">写邮件</el-button>
                        </span>
                    </span>
                </span>
                <el-form ref="form" label-width="80px" >
                    <el-form-item label="收件人">
                        <el-select placeholder="请选择" v-model="emailForm.receiveUserId" filterable>
                            <el-option
                                    v-for="item in userData"
                                    :key="item.userId"
                                    :label="item.userName"
                                    :value="item.userId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="主题">
                        <el-input v-model="emailForm.emailTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="正文">
                        <tinymce v-model="emailForm.emailContent"></tinymce>
                    </el-form-item>
                    <el-form-item style="text-align: center">
                        <el-button @click="sendEmail">
                            发送邮件
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane >
                <span slot="label">
                    <span class="span-box">
                        <span>
                            <el-button type="mini" style="width: 90px">收件箱<span v-show="notReadEmailCount>0">({{notReadEmailCount}})</span></el-button>
                        </span>
                    </span>
                </span>
                <div class="email__mails" v-for="(item, index) in receivedEmailData" :key='index' v-show="!receiveShowDetail">
                    <div class="px-4 py-6" @click="showReceiveDetail(item)">
                        <div class="flex w-full">
                            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                                       class="flex-shrink-0 mr-3 border-2 border-solid border-white">
                            </el-avatar>
                            <div class="flex w-full justify-between items-start">
                                <div>
                                    <h5 class="mb-1">{{ item.emailTitle }}</h5>
                                    <p>发件人：{{ item.sendUserName }}</p>
                                </div>
                                <div class="flex items-center">
                                    <div class="flex items-center">
                                        <div class="h-3 w-3 rounded-full mr-2">
                                        </div>
                                    </div>
                                    <span>{{ item.sendDate }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-show="receiveShowDetail">
                    <div style="margin: 20px">
                        <el-page-header @back="receiveShowDetail=false">
                        </el-page-header>
                    </div>
                    <el-form ref="form" label-width="80px" >
                        <el-form-item label="发件人">
                            <el-input v-model="receiveEmailDetailForm.sendUserName" readonly="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="主题">
                            <el-input v-model="receiveEmailDetailForm.emailTitle" readonly="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="正文">
                        <tinymce v-model="receiveEmailDetailForm.emailContent" :disabled=true></tinymce>
                        </el-form-item>
                        <el-form-item style="text-align: center">
                            <el-button @click="deleteEmail()">删除邮件</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label">
                    <span class="span-box">
                        <span>
                            <el-button type="mini" style="width: 90px">已发送</el-button>
                        </span>
                    </span>
                </span>
                <div class="email__mails" v-for="(item, index) in sentEmailData" :key='index' v-show="!sendShowDetail">
                    <div class="px-4 py-6" @click="showSendDetail(item)">
                        <div class="flex w-full">
                            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                                       class="flex-shrink-0 mr-3 border-2 border-solid border-white">
                            </el-avatar>
                            <div class="flex w-full justify-between items-start">
                                <div>
                                    <h5 class="mb-1">{{ item.emailTitle }}</h5>
                                    <p>收件人：{{ item.receiveUserName }}</p>
                                </div>
                                <div class="flex items-center">
                                    <div class="flex items-center">
                                        <div class="h-3 w-3 rounded-full mr-2"></div>
                                    </div>
                                    <span>{{ item.sendDate }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-show="sendShowDetail">
                    <div style="margin: 20px">
                        <el-page-header @back="sendShowDetail=false">
                        </el-page-header>
                    </div>
                    <el-form ref="form" label-width="80px" >
                        <el-form-item label="收件人">
                            <el-input v-model="sendEmailDetailForm.sendUserName" readonly="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="主题">
                            <el-input v-model="sendEmailDetailForm.emailTitle" readonly="readonly"></el-input>
                        </el-form-item>
                        <el-form-item label="正文">
                            <tinymce v-model="sendEmailDetailForm.emailContent" :disabled=true></tinymce>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane>
                <span slot="label">
                    <span class="span-box">
                        <span>
                            <el-button type="mini" style="width: 90px">回收站</el-button>
                        </span>
                    </span>
                </span>
                <div class="email__mails" v-for="(item, index) in deletedEmailData" :key='index'>
                    <div class="px-4 py-6">
                        <div class="flex w-full">
                            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                                       class="flex-shrink-0 mr-3 border-2 border-solid border-white">
                            </el-avatar>
                            <div class="flex w-full justify-between items-start">
                                <div>
                                    <h5 class="mb-1">{{ item.emailTitle }}</h5>
                                    <p>发件人：{{ item.sendUserName }}</p>
                                </div>
                                <div class="flex items-center">
                                    <div class="flex items-center">
                                        <div class="h-3 w-3 rounded-full mr-2">
                                            <el-button @click="rebackEmail(item)" style="margin-right: 20px">
                                                还原
                                            </el-button>
                                        </div>
                                    </div>
                                    <span>{{ item.sendDate }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>

    </section>
</template>



<script>
    import tinymce from '@/components/tinymce/tinymce.vue'

    export default {
        name: "emailManager",
        components: {
            tinymce
        },
        created() {
            this.$http({
                url: '/user/users',
                method: 'get',
                params: {}
            }).then((response) => {
                this.userData = response;
            });
            this.refreshReceivedEmail();
            this.refreshSentEmail();
            this.refreshDeletedEmail();
            this.refreshReceivedEmailWithNotRead();
        },
        data() {
            return {
                receiveShowDetail: false,
                sendShowDetail: false,
                userData: [],
                receivedEmailData: [],
                sentEmailData: [],
                deletedEmailData: [],
                tabPosition: 'left',
                notReadEmailCount: 0,
                emailForm: {
                    receiveUserId: '',
                    emailContent: '',
                    emailTitle: ''
                },
                receiveEmailDetailForm: {
                    emailId: '',
                    sendUserName: '',
                    emailContent: '',
                    emailTitle: ''
                },
                sendEmailDetailForm: {
                    receiveUserName: '',
                    emailContent: '',
                    emailTitle: ''
                }
            };
        },
        methods: {
            refreshReceivedEmail() {
                this.$http({     //收件箱
                    url: '/email/receiveEmails',
                    method: 'get',
                    params: {}
                }).then((response) => {
                    console.log(response)
                    this.receivedEmailData = response;
                })
            },
            refreshSentEmail() {
                this.$http({     //已发送
                    url: '/email/sendEmails',
                    method: 'get',
                    params: {}
                }).then((response) => {
                    this.sentEmailData = response;
                });
            },
            refreshDeletedEmail() {
                this.$http({     //回收站
                    url: '/email/deletedEmails',
                    method: 'get',
                    params: {}
                }).then((response) => {
                    this.deletedEmailData = response;
                });
            },
            refreshReceivedEmailWithNotRead() {
                this.$http({     //未读
                    url: '/email/receivedAndNotReadEmails',
                    method: 'get',
                    params: {}
                }).then((response) => {
                    this.notReadEmailCount = response.length;
                });
            },
            sendEmail()  {
                this.$http({
                    url: '/email/email',
                    method: 'post',
                    data: this.$qs.stringify(this.emailForm)
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '发送成功！'
                    });
                    this.emailForm.receiveUserId = '';
                    this.emailForm.emailContent = '';
                    this.emailForm.emailTitle = '',
                    this.refreshReceivedEmail();
                    this.refreshSentEmail();
                    this.refreshReceivedEmailWithNotRead();
                })
            },
            showReceiveDetail(data) {
                let ifPut = false;
                return new Promise((resolve)=>{
                    this.receiveEmailDetailForm.emailId = data.emailId;
                    this.receiveEmailDetailForm.emailContent = data.emailContent;
                    this.receiveEmailDetailForm.sendUserName = data.sendUserName;
                    this.receiveEmailDetailForm.emailTitle = data.emailTitle;
                    this.receiveShowDetail = true;
                    if(data.isRead!='1'){
                        data.isRead = '1';
                        ifPut = true;
                        resolve(data)
                    }
                }).then((data)=>{
                    if(ifPut){
                        this.$http({
                            url: '/email/email',
                            method: 'put',
                            data: this.$qs.stringify(data)
                        }).then(() => {
                            this.refreshReceivedEmailWithNotRead();
                        })
                    }
                })
            },
            showSendDetail(data) {
                this.sendEmailDetailForm.emailContent = data.emailContent;
                this.sendEmailDetailForm.sendUserName = data.receiveUserName;
                this.sendEmailDetailForm.emailTitle = data.emailTitle;
                this.sendShowDetail = true;
            },
            deleteEmail() {
                this.$confirm('将删除邮件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: '/email/deleteEmail/'+this.receiveEmailDetailForm.emailId,
                        method: 'put',
                        params: {

                        }
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '邮件已放入回收站！'
                        });
                        this.refreshReceivedEmail();
                        this.refreshDeletedEmail();
                        this.receiveShowDetail = false;
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            rebackEmail(item) {
                this.$confirm('将还原邮件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: '/email/rebackEmail/'+item.emailId,
                        method: 'put',
                        params: {

                        }
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '邮件已还原至收件箱！'
                        });
                        this.refreshReceivedEmail();
                        this.refreshDeletedEmail();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消还原'
                    });
                });
            }
        }
    }
</script>

<style lang="stylus" scoped>

    .email__mails {
        background-color: #ffffff;
        border: 1px solid #dae1e7;
        &:hover {
            transform: translateY(-4px);
            box-shadow: 0px 3px 10px 0px #ccc;
            transition: all 0.2s;
        }
    }

</style>